<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="title">
				<text>手机号登录</text>
			</view>
			<view class="sub-title">
				<text>未注册的手机号登录后将自动注册</text>
			</view>
		</view>
		<!-- 表单 -->
		<view class="login-form">
			<!-- 手机号 -->
			<view class="form-item">
				<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
			</view>
			<!-- 短信验证码 -->
			<view class="form-item">
				<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
				<view class="form-item--parts">
					<view class="captcha-sms" @click="handelSmsCaptcha()">
						<text v-if="!smsState" class="activate">获取验证码</text>
						<text v-else class="un-activate">重新发送({{ times }})秒</text>
					</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="login-button" :class="{ disabled }" @click="handleLogin()">
				<text>登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	// import store from '@/store'
	// //import * as LoginApi from '@/api/login'
	// import * as CaptchaApi from '@/api/captcha'
	import * as Verify from '@/utils/verify'

	// 倒计时时长(秒)
	const times = 60

	// 表单验证场景
	const GET_CAPTCHA = 10
	const SUBMIT_LOGIN = 20

	export default {
		data() {
			return {
				// 正在加载
				isLoading: false,
				// 按钮禁用
				disabled: false,
				// 图形验证码信息
				captcha: {},
				// 短信验证码发送状态
				smsState: false,
				// 倒计时
				times,
				// 手机号
				mobile: '',
				// 短信验证码
				smsCode: ''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {

		},

		methods: {

			// 点击发送短信验证码
			handelSmsCaptcha() {
				const app = this
				if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
					app.sendSmsCaptcha()
				}
			},

			// 表单验证
			formValidation(scene = GET_CAPTCHA) {
				const app = this
				// 验证获取短信验证码
				if (scene === GET_CAPTCHA) {
					if (!app.validteMobile(app.mobile)) {
						return false
					}
				}
				// 验证提交登录
				if (scene === SUBMIT_LOGIN) {
					if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
						return false
					}
				}
				return true
			},

			// 验证手机号
			validteMobile(str) {
				if (Verify.isEmpty(str)) {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
					return false
				}
				if (!Verify.isMobile(str)) {
					uni.showToast({
						title: '请输入正确格式的手机号',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 验证短信验证码
			validteSmsCode(str) {
				if (Verify.isEmpty(str)) {
					uni.showToast({
						title: '请先输入短信验证码',
						icon: 'none'
					})
					return false
				}
				return true
			},

			// 请求发送短信验证码接口
			sendSmsCaptcha() {
				const app = this
				app.isLoading = true
				app.$http("api/common/sendCode", {
					phone: app.mobile
				}).then(result => {
					// console.log(result);
					if (result.code != 200) {
						uni.showToast({
							title: "发送失败",
							icon: 'none'
						})
						return
					}
					app.isLoading = false
					// 显示发送成功
					uni.showToast({
						title: "发送成功",
						icon: 'none'
					})
					// 执行定时器
					app.timer()
				})
			},

			// 执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval(() => {
					app.times = app.times - 1
					if (app.times <= 0) {
						app.smsState = false
						app.times = times
						clearInterval(inter)
					}
				}, 1000)
			},

			// 点击登录
			handleLogin() {
				const app = this
				if (!app.isLoading && !app.disabled && app.formValidation(SUBMIT_LOGIN)) {
					app.submitLogin()
				}
			},

			// 确认登录
			submitLogin() {
				const app = this
				app.isLoading = true
				app.disabled = true
				app.$http("api/user/phoneLogin", {
						phone: app.mobile, //true	string		手机号
						code: app.smsCode, //true	string		验证码
						referee_id: uni.getStorageSync('referee_id') || 0,
						type: 4,
					}).then(result => {
						// console.log(result);
						if (result.code != 200) {
							app.disabled = false
							app.isLoading = false
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
							return
						}
						uni.setStorageSync("token", result.result.token);
						uni.hideLoading()
						// 一键登录成功
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						// 跳转回原页面
						setTimeout(() => {
							// uni.navigateBack()
							uni.switchTab({
								url: '/pages/my/my'
							});

						}, 2000)
					})
					.catch(err => {
						app.disabled = false
						app.isLoading = false
					})
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$link('/pages/index/index')
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 100rpx 60rpx;
		min-height: 100vh;
		background-color: #fff;
	}

	// 页面头部
	.header {
		margin-bottom: 60rpx;

		.title {
			color: #191919;
			font-size: 54rpx;
		}

		.sub-title {
			margin-top: 20rpx;
			color: #b3b3b3;
			font-size: 28rpx;
		}
	}

	// 输入框元素
	.form-item {
		display: flex;
		align-items: center;
		padding: 18rpx;
		border-bottom: 1rpx solid #f3f1f2;
		margin-bottom: 30rpx;
		height: 96rpx;

		&--input {
			font-size: 28rpx;
			letter-spacing: 1rpx;
			flex: 1;
			height: 100%;
		}

		&--parts {
			min-width: 100rpx;
			//height: 100%;
		}

		// 图形验证码
		.captcha {
			//height: 100%;
			height: 60rpx;

			.image {
				display: block;
				width: 192rpx;
				height: 100%;
			}
		}

		// 短信验证码
		.captcha-sms {
			font-size: 28rpx;
			line-height: 50rpx;
			padding-right: 20rpx;

			.activate {
				color: #fa2209;
			}

			.un-activate {
				color: #9e9e9e;
			}
		}
	}


	// 登录按钮
	.login-button {
		width: 100%;
		height: 86rpx;
		margin-top: 80rpx;
		background: linear-gradient(to right, #fa2209, #ff6335);
		color: #FFFFFF;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		// 禁用按钮
		&.disabled {
			opacity: 0.6;
		}
	}
</style>